<template>
	<view>
		<view class="iphone">
			<input v-model="username" type="text" placeholder="请输入用户名" @input="clearInput" />
		</view>
		<view class="iphone">
			<!-- <input ref="phones" v-model="phone" type="number" placeholder="请输入手机号" :value="iphoneValue" -->
			<input ref="phones" v-model="phone" type="number" placeholder="请输入手机号"
				@input="clearInput" />
			<button class="mini-btn" type="primary" @click="acquireCode" size="mini">获取验证码</button>
		</view>
		<view class="iphone">
			<input type="number" v-model="code" placeholder="请输入验证码" @input="clearInput" />
		</view>
		<view class="iphone">
			<input type="password" v-model="password" placeholder="请设置密码" @input="clearInput" />
		</view>
		<view class="iphone">
			<input type="password" v-model="confirmPassword" placeholder="再次确认密码" 
				@input="clearInput" />
		</view>
		<view class="iphone">
			<input type="text" v-model="car" placeholder="请填写车牌号" @input="clearInput" />
		</view>
		<!-- 图片上传 -->
		<view class="example" @tap="chooseVideoImage">
			<image class="img" src="../../static/mipmap-xxxhdpi/icon_append.png" style="width:300rpx;height:300rpx;">
			</image>
			<p>上传正脸图片，用于门禁开门</p>
		</view>
		<view class="iphone">
			<input type="text" placeholder="请选择所在企业(选填)" :value="iphoneValue" @input="clearInput" />
		</view>
		<button class="btn" @click="add" type="primary">注册</button>
		<!-- 协议 -->
		<view class="agreement">
			<checkbox-group>
				<label>
					<checkbox value="cb" checked="true" color="#55aaff"
						style="transform:scale(1)background-color: blue" />
				</label>
			</checkbox-group>
			<span>同意<b>(园丁用户服务协议)</b>和<b>(隐私协议)</b></span>
		</view>

		<view class="modal-mask" v-if="showModal">
			<view class="modal-wrapper">
				<view class="modal-container">
					<h3>{{ modalTitle }}</h3>
					<p>{{ modalMessage }}</p>
					<view class="modal-buttons">
						<button @click="cancelModal">取消</button>
						<button @click="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		register,
		registerCode
	} from "@/utils/ajax.js"
	import {
		ref,
		reactive
	} from "vue"
	
	import { useRouter } from 'vue-router'
	const router = useRouter() // 获取路由

	const phone = ref("")
	const username = ref('')
	const password = ref('')
	// 确认密码
	const confirmPassword = ref("")
	// 验证码
	const code = ref("")
	// 车牌号
	const car = ref('')

	// 添加错误提示模态框相关逻辑
	const showModal = ref(false)
	const modalTitle = ref('')
	const modalMessage = ref('')

	// 正则表达式
	// const usernameRegex = /^[a-zA-Z0-9_-]{4,16}$/ // 用户名只能包含字母、数字、下划线和减号，长度为4到16位。
	// const passwordRegex =
	// 	/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/ // 密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符，长度为8位以上。
	// const cheRegex = /^[A-Z0-9]{5}$/ // 车牌号只接受大写字母和数字，长度为5位。

	// 点击验证码
	function acquireCode() {
		registerCode("5eead1e7ec2d1_1592447463", phone.value, 1).then(res => {
			console.log(res);
			if (res.data.api_code === 200) {
			  showModal.value = true;
			  modalTitle.value = "提示";
			  modalMessage.value = "验证码已发送，请注意查收！";
			} else {
			  showModal.value = true;
			  modalTitle.value = "错误提示";
			  modalMessage.value = res.data.api_msg || "未知错误";
			}
		})
	}

	// 点击注册
	function add() {
		// 正则验证
		// if (!usernameRegex.test(username.value)) { // 验证用户名是否合法
		//   showModal.value = true
		//   modalTitle.value = '错误提示'
		//   modalMessage.value = '用户名只能包含字母、数字、下划线和减号，长度为4到16位。'
		//   return
		// }
		// if (!passwordRegex.test(password.value)) { // 验证密码是否合法
		//   showModal.value = true
		//   modalTitle.value = '错误提示'
		//   modalMessage.value = '密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符，长度为8位以上。'
		//   return
		// }
		// if (password.value !== confirmPassword.value) { // 验证两次输入的密码是否一致
		//   showModal.value = true
		//   modalTitle.value = '错误提示'
		//   modalMessage.value = '两次输入的密码不一致'
		//   return
		// }
		// // 车牌号
		// if (!cheRegex.test(car.value)) { // 验证车牌号是否合法
		//   showModal.value = true
		//   modalTitle.value = '错误提示'
		//   modalMessage.value = '车牌号只接受大写字母和数字，长度为5位。'
		//   return
		// }
		register(1, username.value, phone.value, code.value, password.value, "", car.value,0)
			.then(res => {
				console.log(res);
				if (res.data.api_code === 200 || 504) {
				  showModal.value = true;
				  modalTitle.value = "提示";
				  modalMessage.value = "注册成功！";
				  // 注册成功后跳转到登录页面
				  router.push("/pages/login/login");
				} else {
				  showModal.value = true;
				  modalTitle.value = "错误提示";
				  modalMessage.value = res.data.api_msg || "未知错误";
				}
			})

		// 注册成功时清除错误提示
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}

	// 清除输入框的值
	function clearInput() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}

	// 点击错误提示模态框的取消按钮
	function cancelModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}

	// 点击错误提示模态框的确定按钮
	function confirmModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}
</script>



<style>
	.iphone,
	.password {
		position: relative;
		width: 650rpx;
		height: 140rpx;
		margin-bottom: 30px;
		border-bottom: 1px solid #e3e3e3;
		margin: 0 auto;
	}

	input {
		width: 700rpx;
		height: 150rpx;
		font-size: 20px;
		line-height: 150rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 14px;
		right: 30px;
	}

	.bottom {
		position: relative;
		width: 700rpx;
		top: 170rpx;
		margin: 0 auto;
	}

	.mini-btn {
		position: absolute;
		right: 0px;
		top: 22px;
	}

	/*  */
	.example .img,
	.example p {
		display: inline-block;
		margin-top: 20px;
		margin-left: 40rpx;
		font-size: 18px;
		color: #888888;
		height: 60rpx;
	}

	.btn {
		width: 600rpx;
		position: relative;
		top: 40px;
	}

	.agreement {
		position: relative;
		width: 600rpx;
		height: 70rpx;
		/* background-color: antiquewhite; */
		top: 70px;
		margin: 0 auto;
	}

	checkbox-group {
		display: inline-block;
	}

	.agreement span {
		/* border:1px solid; */
		display: inline-block;
	}

	.agreement span b {
		color: #55aaff;
	}



	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.modal-container {
		width: 300px;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}
</style>